<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Navigator | Onsen UI</title>  
  <link rel="stylesheet" href="../styles/app.css"/>
  <link rel="stylesheet" href="../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../build/css/onsen-css-components.css">

  <script src="../../build/js/angular/angular.js"></script>    
  <script src="../../build/js/onsenui.js"></script>    
  <script src="../app.js"></script>  

  <script>
    var app = angular.module('myApp', ['onsen']);

    app.controller('PageController', function($scope) {
      var options = $scope.myNavigator.getCurrentPage().options;
      console.log(myNavigator.getPages().length);
      console.log(options);
    });
  </script>
  
</head>

<body>    
  <ons-navigator var="myNavigator">

    <ons-page>
      <ons-toolbar>
        <div class="center">Navigator</div>
        <div class="right"><ons-toolbar-button modifier="border"><ons-icon icon="ion-navicon" style="font-size: 32px"></ons-icon>fuga</ons-toolbar-button></div>
      </ons-toolbar>

      <div style="text-align: center">
        <br>
        <ons-button 
          ng-click="myNavigator.pushPage('page1.html', {hoge: 'hoge'})">
          Push Page 2
        </ons-button>
      </div>
    </ons-page>
  
  </ons-navigator>  

  <script type="text/ons-template" id="page1.html">
    <ons-page ng-controller="PageController">
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Page 2</div>
      </ons-toolbar>

      <div style="text-align: center">
        <h1>Page 2</h1>
        <ons-button 
          ng-click="myNavigator.pushPage('page1.html', {title: 'Page'})">
          Push Page
          </ons-button>

        <ons-button 
          ng-click="myNavigator.popPage()">
          Pop Page
        </ons-button>
      </div>
    </ons-page>
  </script>
  
</body>
</html>
